{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>提示消息</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<article><p>提示消息又称“工具提示”，在用户鼠标悬停在元素上时及时显示额外的内容。</p></article>









<section><header><h3>示例</h3></header><article><p>下面示例中的每个链接都有提示消息，将鼠标移到链接上可以查看提示消息。</p><div class="tooltip-demo example">
  <p><a href="#" data-toggle="tooltip" title="" data-original-title="英语：Cascading Style Sheets，简写CSS">层叠样式表</a>，又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表，一种用来为<a href="#" data-toggle="tooltip" title="" data-original-title="如HTML文档或XML应用">结构化文档</a>添加样式（字体、间距和颜色等）的计算机语言，由 W3C 定义和维护。目前最新版本是 CSS2.1，为 W3C 的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发过程中。（摘自<a href="https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8" data-toggle="tooltip" title="" target="_blank" data-original-title="访问“层叠样式表”词条">维基百科</a>）</p>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tooltip"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"英语：Cascading Style Sheets，简写CSS"</span><span class="tag">&gt;</span><span class="pln">层叠样式表</span><span class="tag">&lt;/a&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 你需要手动初始化工具提示</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'[data-toggle="tooltip"]'</span><span class="pun">).</span><span class="pln">tooltip</span><span class="pun">();</span></code></pre><p>为需要显示工具提示的元素添加 <code>[data-toggle="tooltip"]</code> 属性，并调用工具提示初始化方法即可。默认情况下元素的 <code>[title]</code> 属性值即为工具提示显示的内容。</p><div class="alert alert-warning">
  <h4>提示</h4>
  <p>提示消息与按钮组和输入框组联合使用时需要一些特殊设置：在 .btn-group 或 .input-group 内的元素上使用提示消息时，你需要指定 container: 'body'选项以避免不需要的副作用（例如，当工具提示显示之后，与其合作的页面元素可能变得更宽或是去圆角）。</p>
</div></article></section>








<section><header><h3>弹出方向</h3></header><article><p>使用 <code>placement</code> 选项来指定工具提示相对于元素显示的位置。</p><div class="example tooltip-demo">
  <button type="button" class="btn" data-toggle="tooltip" data-placement="left" title="" data-original-title="左侧提示内容">左侧提示</button>
  <button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="" data-original-title="上方提示内容">上方提示</button>
  <button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="下方提示内容">下方提示</button>
  <button type="button" class="btn" data-toggle="tooltip" data-placement="right" title="" data-original-title="右侧提示内容">右侧提示</button>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tooltip"</span><span class="pln"> </span><span class="atn">data-placement</span><span class="pun">=</span><span class="atv">"left"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"左侧提示内容"</span><span class="tag">&gt;</span><span class="pln">左侧提示</span><span class="tag">&lt;/button&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tooltip"</span><span class="pln"> </span><span class="atn">data-placement</span><span class="pun">=</span><span class="atv">"top"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"上方提示内容"</span><span class="tag">&gt;</span><span class="pln">上方提示</span><span class="tag">&lt;/button&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tooltip"</span><span class="pln"> </span><span class="atn">data-placement</span><span class="pun">=</span><span class="atv">"bottom"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"下方提示内容"</span><span class="tag">&gt;</span><span class="pln">下方提示</span><span class="tag">&lt;/button&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tooltip"</span><span class="pln"> </span><span class="atn">data-placement</span><span class="pun">=</span><span class="atv">"right"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"右侧提示内容"</span><span class="tag">&gt;</span><span class="pln">右侧提示</span><span class="tag">&lt;/button&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 或者在初始化时指定</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'[data-toggle="tooltip"]'</span><span class="pun">).</span><span class="pln">tooltip</span><span class="pun">({</span><span class="pln">
    placement</span><span class="pun">:</span><span class="pln"> </span><span class="str">'bottom'</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>









<section><header><h3>外观</h3></header><article><p>使用 <code>tipClass</code> 指定外观类名来更改颜色主题。</p><div class="example tooltip-demo">
  <a class="text-primary" data-toggle="tooltip" data-tip-class="tooltip-primary" title="" data-original-title="tooltip-primary">.tooltip-primary</a> &nbsp; 
  <a class="text-success" data-toggle="tooltip" data-tip-class="tooltip-success" title="" data-original-title="tooltip-success">.tooltip-success</a> &nbsp; 
  <a class="text-info" data-toggle="tooltip" data-tip-class="tooltip-info" title="" data-original-title="tooltip-info">.tooltip-info</a> &nbsp; 
  <a class="text-warning" data-toggle="tooltip" data-tip-class="tooltip-warning" title="" data-original-title="tooltip-warning">.tooltip-warning</a> &nbsp; 
  <a class="text-danger" data-toggle="tooltip" data-tip-class="tooltip-danger" title="" data-original-title="tooltip-danger">.tooltip-danger</a> &nbsp; 
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tooltip"</span><span class="pln"> </span><span class="atn">data-tip-class</span><span class="pun">=</span><span class="atv">"tooltip-primary"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"tooltip-primary"</span><span class="tag">&gt;</span><span class="pln">.tooltip-primary</span><span class="tag">&lt;/a&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tooltip"</span><span class="pln"> </span><span class="atn">data-tip-class</span><span class="pun">=</span><span class="atv">"tooltip-success"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"tooltip-success"</span><span class="tag">&gt;</span><span class="pln">.tooltip-success</span><span class="tag">&lt;/a&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tooltip"</span><span class="pln"> </span><span class="atn">data-tip-class</span><span class="pun">=</span><span class="atv">"tooltip-info"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"tooltip-info"</span><span class="tag">&gt;</span><span class="pln">.tooltip-info</span><span class="tag">&lt;/a&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tooltip"</span><span class="pln"> </span><span class="atn">data-tip-class</span><span class="pun">=</span><span class="atv">"tooltip-warning"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"tooltip-warning"</span><span class="tag">&gt;</span><span class="pln">.tooltip-warning</span><span class="tag">&lt;/a&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">data-toggle</span><span class="pun">=</span><span class="atv">"tooltip"</span><span class="pln"> </span><span class="atn">data-tip-class</span><span class="pun">=</span><span class="atv">"tooltip-danger"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">""</span><span class="pln"> </span><span class="atn">data-original-title</span><span class="pun">=</span><span class="atv">"tooltip-danger"</span><span class="tag">&gt;</span><span class="pln">.tooltip-danger</span><span class="tag">&lt;/a&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 或者在初始化时指定</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'[data-toggle="tooltip"]'</span><span class="pun">).</span><span class="pln">tooltip</span><span class="pun">({</span><span class="pln">
    tipClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'tooltip-success'</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>

<section><header><h3>选项</h3></header><article><p>可以将选项通过 <code>[data-*]</code> 属性或 JavaScript 对象指定。</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th style="width: 100px;">名称</th>
      <th style="width: 100px;">类型</th>
      <th style="width: 50px;">默认值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>animation</code></td>
      <td>布尔值</td>
      <td><code>true</code></td>
      <td>决定是否应用淡入淡出动画。</td>
    </tr>
    <tr>
      <td><code>container</code></td>
      <td>字符串 | <code>false</code></td>
      <td><code>false</code></td>
      <td>
        <p>决定相对位置的父级容器，例如：<code>container: 'body'</code></p>
      </td>
    </tr>
    <tr>
      <td><code>delay</code></td>
      <td>数字 | 对象</td>
      <td><code>0</code></td>
      <td>
        <p>如果指定为数字，则在指定数值的毫秒数后再显示。</p>
        <p>如果指定为对象，则可以分别为显示或隐藏之前延迟的数值，例如：<code>delay: { show: 500, hide: 100 }</code></p>
      </td>
    </tr>
    <tr>
      <td><code>html</code></td>
      <td>布尔值</td>
      <td><code>false</code></td>
      <td>是否允许消息内容包含 HTML 格式源码。如果设置为 <code>false</code>，则仅仅使用 jQuery 的 <code>text()</code> 方法来设置消息内容。</td>
    </tr>
    <tr>
      <td><code>placement</code></td>
      <td>字符串 | 函数</td>
      <td><code>'top'</code></td>
      <td>指定消息显示的位置，可选值有：<code>'top'</code>, <code>'bottom'</code>, <code>'left'</code>, <code>'right'</code>, <code>'auto'</code>。如果设置为 <code>'auto'</code>，则会自动决定位置。也可以指定为一个函数，来动态返回应该显示的位置。</td>
    </tr>
    <tr>
      <td><code>selector</code></td>
      <td>字符串 | <code>false</code></td>
      <td><code>false</code></td>
      <td>如果指定了该选项，则会在代理元素来触发显示工具提示，这样可以对于一些动态内容展示工具提示。</td>
    </tr>
    <tr>
      <td><code>template</code></td>
      <td>字符串</td>
      <td><code>'&lt;div class="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
      <td>HTML 模板字符串用来创建工具提示显示内容元素。要求顶级元素必须有 <code>.tooltip</code> 类，工具提示的内容会设置为 <code>.tooltip-inner</code> 的内容，<code>.tooltip-arrow</code> 将作为箭头元素。</td>
    </tr>
    <tr>
      <td><code>title</code></td>
      <td>字符串 | 函数</td>
      <td><code>''</code></td>
      <td>设定提示消息内容，如果为函数，可以动态返回用于提示消息内容文本。</td>
    </tr>
    <tr>
      <td><code>trigger</code></td>
      <td>字符串</td>
      <td><code>'hover focus'</code></td>
      <td>指定哪些事件会触发显示提示消息，多个事件用空格隔开，可选值包括：<code>'click'</code>、<code>'hover'</code>、<code>'focus'</code>、<code>'manual'</code>。</td>
    </tr>
    <tr>
      <td><code>tipId</code></td>
      <td>字符串</td>
      <td><code>''</code></td>
      <td>当工具提示显示时为动态创建的 <code>.tooltip</code> 元素指定一个 ID 属性。</td>
    </tr>
    <tr>
      <td><code>tipClass</code></td>
      <td>字符串</td>
      <td><code>''</code></td>
      <td>当工具提示显示时为动态创建的 <code>.tooltip</code> 元素指定一个 CLASS 属性，多个 CLASS 使用空格分隔。</td>
    </tr>
  </tbody>
</table></div></article></section>

<section><header><h3>方法</h3></header><article><h4><span class="code">$().tooltip(options)</span></h4><p>为一组元素应用工具提示。</p><h4><span class="code">.tooltip('show')</span></h4><p>展示工具提示。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#element'</span><span class="pun">).</span><span class="pln">tooltip</span><span class="pun">(</span><span class="str">'show'</span><span class="pun">);</span></code></pre><h4><span class="code">.tooltip('show', content)</span></h4><p>展示工具提示并指定要显示的文本内容。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#element'</span><span class="pun">).</span><span class="pln">tooltip</span><span class="pun">(</span><span class="str">'show'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'这是新的工具提示内容'</span><span class="pun">);</span></code></pre><h4><span class="code">.tooltip('hide')</span></h4><p>隐藏工具提示。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#element'</span><span class="pun">).</span><span class="pln">tooltip</span><span class="pun">(</span><span class="str">'hide'</span><span class="pun">);</span></code></pre><h4><span class="code">.tooltip('toggle')</span></h4><p>展示或隐藏工具提示。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#element'</span><span class="pun">).</span><span class="pln">tooltip</span><span class="pun">(</span><span class="str">'toggle'</span><span class="pun">);</span></code></pre><h4><span class="code">.tooltip('destroy')</span></h4><p>隐藏并销毁工具提示。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#element'</span><span class="pun">).</span><span class="pln">tooltip</span><span class="pun">(</span><span class="str">'destroy'</span><span class="pun">);</span></code></pre></article></section>




<script>
$(function(){
  $('[data-toggle="tooltip"]').tooltip();
})
</script>

<section><header><h3>事件</h3></header><article><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th style="width: 150px;">事件类型</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>show.zui.tooltip</code></td>
      <td>当 <code>show</code> 方法被调用之后，此事件将被立即触发。</td>
    </tr>
    <tr>
      <td><code>shown.zui.tooltip</code></td>
      <td>当工具提示展示到用户面前之后（同时CSS过渡效果执行完之后）此事件被触发。</td>
    </tr>
    <tr>
      <td><code>hide.zui.tooltip</code></td>
      <td>当 <code>hide</code> 方法被调用之后，此事件被触发。</td>
    </tr>
    <tr>
      <td><code>hidden.zui.tooltip</code></td>
      <td>当工具提示被隐藏之后（同时CSS过渡效果执行完之后），此事件被触发。</td>
    </tr>
  </tbody>
</table></div><p>使用 jQuery <code>on()</code> 方法来绑定事件。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'[data-toggle="tooltip"]'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'show.zui.tooltip'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="com">// 处理工具提示显示时的事件</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section></div>
</section>
{/block}